<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./css/primer.css" rel="stylesheet" type="text/css"/>
    <title>memory allocation</title>
    <style type="text/css">
    body{
        margin: 0;
        padding: 0;
        /* height: 100%; */
        background-color: whitesmoke;
    }
    .job{
        height:25px;
        width:80px;
        border-radius:4px;
        border:1px solid #DBDBDB;
    }

    #main {
        transition: margin-right .5s;/*主体内容延迟0.5s整体y右移动*/
        padding: 0;
    }

    /*add table css*/
    table {
        border-collapse: collapse;
        width:100%
    }

    table td,
    table th {
        font-weight: 600;
        padding: 4px 7px;
        text-align: center;
        
    }

    table td {
        color: #575757;
        text-align: center;
    }

    table th:first-child,
    table td:first-child {
        padding-left: 8px;
        text-align: center;
    }
    
    table tr.default th {
        border: 0;
        text-align: center;
    }

    table tr.default td {
        border: 0;
        text-align: center;
    }

    table tr.default:nth-child(even) {
        background: #f2f2f2;
    }

    table tr.default:nth-child(odd)  {
        background: #fff;
    }
    </style>

    <script type="text/javascript" src="./js/lib/d3.v5.min.js"></script>
    <script type="text/javascript" src="./js/memory.js"></script>
    <script type="text/javascript">
        // var currprogram = "news";
        var flag = 0;
        function changeNav() {
            if (flag == 0){
                flag = 1;
                document.getElementById("mySidenav").style.width = "400px";
                document.getElementById("main").style.marginRight = "160px";
            }
            else if (flag == 1){
                flag = 0;
                document.getElementById("mySidenav").style.width = "0";
                document.getElementById("main").style.marginRight= "0";
            }       
        }

        function display(ID){
            var str = ID.replace(ID.substring(0, 1), ID.substring(0, 1).toUpperCase())
            document.title = str + "-Rua!";

            document.getElementById(currprogram).style.display='none';
            document.getElementById(ID).style.display='block';
            currprogram = ID;
            
            changeNav(); 
        }

        function hide_tips()  
        {       
            var ui =document.getElementById("showtips");      
            ui.style.visibility="hidden";  
        }
        function show_tips()
        {
            var ui =document.getElementById("showtips");      
            ui.style.visibility="visible";  
        }
    </script>

    <body>
        <!-- <div id="mySidenav" class="sidenav">
            <a href='javascript:changeNav()'>Tips</a>
        </div>
         -->
        <div  class="anim-scale-in bg-gray-dark text-white p-2">
            <!-- <div style="display:flex;flex-direction:row"> -->
            <h2 class="anim-fade-in" style="display:inline; color:white; margin-left: 40px;">
                Memory Allocation
            </h2>
            <h3 class="btn btn-sm" type="button" style="border-color: #555454; border-width: 1px; display:inline; color: white; margin-left: 2%; background-color: #24292e;" onclick="show_tips()"> 
                Tips
            </h3> 
            <!-- </div> -->
        </div>

    <div id="main" class="anim-fade-in">
        <div class="application-main" style="display:flex;height: auto;" >
            <div class="col-3 " style="height:inherit; width: 32%;">
                <div class="box-shadow p-3" style="height:780px; background-color:whitesmoke; width: 100%; ">
                    <div class="box" style="height: auto; background-color:whitesmoke; width: auto;margin-left:40px"> 
                        <br>
                        <h2 class="m-0">
                            Set up system
                        </h2>
                        <sapn style="margin-top:16px;display:block">the size of memory</sapn>
                        <br>
                        <span style="margin:8px,0px,20px,0px">  <input type="number" style="height:25px;width:110px;border-radius:4px;border:1px solid #DBDBDB;" id="max_mem_size"> MB
                        <!-- <select id="setofmem" style="border-radius:2px;border:1px solid #DBDBDB"> 
                            <option value=1>bytes</option>
                            <option value=1024>KB</option>
                            <option value=1048576>MB</option>
                        </select> -->
                        </span>
                        <!-- <br><br>
                        <button class="btn btn-sm" type="button" style="background-color:#2ea44e; color: white;" onclick="set_up_system()">set up the system</button> -->
                        <br><br>
                        <br><br>
                    </div>   
                   
                    <div class="box" style="height: auto; background-color: whitesmoke; width: auto; margin-left:40px">
                        <h2 class="m-0">
                            Set up jobs
                        </h2>
                        <br>
                        <div id="operate" > 
                            <button  class="btn btn-sm" type="button" onclick="remove_all_jobs()" id="clean_button" style="background-color: #e34c25; color:white;">remove all jobs</button>
                        </div> 
                        <br>
                        <input style="margin-top: 3%; height:25px;width:210px;border-radius:4px;border:0px solid #DBDBDB; font-size: 12px;" type="file" onchange="read_from_file()" accept="application/json" id="json_file">
                        <br>
                        <br>
                        <div id="unconfirmed_jobs" style="margin-top:10px;">
                            <button style="margin-bottom: 1%;" class="btn btn-sm" id="manually" onclick="display_manually();">add jobs manually</button>
                            <div id="input" style="display: none;">
                                <div id="input_jobs" style="display: inline;">
                                    order number
                                    <input type="number" class="job" id="order_number" style="width:80px;margin-right:5px;">
                                    size
                                    <input type="number" style="width: 80px;" id="job_size" class="job"> MB
                                        <!-- <select style="margin-right: 3%;" id="setofjob"> 
                                            <option value=1>bytes</option>
                                            <option value=1024>KB</option>
                                            <option value=1028576>MB</option>
                                        </select> -->
                                    <br><br>
                                    in time
                                    <input type="number" class="job" id="in_time" style="margin-right: 22px;">
                                    run time
                                    <input type="number" class="job" id="run_time">
                                <br><br>
                                    <button class="btn btn-sm" type="button" onclick="add_a_job()">add the job</button>
                             </div>
                        </div>
                        </div>    
                        <br>
                        <div id = "showtips" class="Box" style="width: 400px;">
                            <div class="Box-row" style="background-color:#79b8ff; width: 400px;">
                                <div style="display:flex;flex-direction:row">
                                    <h3 class="m-0" style="color: snow;">
                                        Tips
                                    </h3>
                                    <button class="btn-octicon" type="button" aria-label="Trashcan icon" onclick="hide_tips()" style="margin-left: 300px;">
                                      
                                        <svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
                                    </button>  
                                </div> 
    
                                <div> 
                                    <h5 style="color: snow;">
                                        1、Set the system before run or it will work. 
                                    </h5>
                                    <h5 style="color: snow;">
                                        2、Check the job and running process in detail.
                                    </h5>
                                    <h5 style="color: snow;">
                                        3、Choose the algorithm from FF, BF and WF before you play the animation.
                                    </h5>
                                    <h5 style="color: snow;">
                                        4、Reset if you want to check other algorithm.
                                    </h5>
                                    <br>
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>   
            </div>    
           
                <div class="box-shadow p-3" style="display:flex; height:780px; background-color:whitesmoke; width: 40% ">
                    <br>
                    <div id="visiable" style="margin-top: 3%; margin-left: 5%;">
                        <h2 class="m-0">
                            Play the animation
                        </h2>
                        <br>
                        <div id="control">
                            <sapn>
                                allocation algorithm
                                <select id="algorithm" style="border-radius:2px;border:1px solid #DBDBDB"> 
                                    <option value="FF">FF(首先适应算法)</option>
                                    <option value="BF">BF(最佳适应算法)</option>
                                    <option value="WF">WF(最差适应算法)</option>
                                </select>
                            </sapn>
                            <button class="btn btn-sm" id='btn-reset' type="button" onclick="load_jobs();" style="background-color: #2ea44e; color:white; width: 78px; margin-left: 40px;">set jobs</button>
                            <br>
                            <br>
                            <button class="btn btn-sm" type="button" style="width: 80px;" onclick="anime.step_play();">step play</button>
                            <button class="btn btn-sm" type="button" style="width: 80px; margin-left: 100px;" onclick="anime.auto_play();">auto play</button>
                            <button id="btn-pause" class="btn btn-sm" type="button" style="background-color:#79b8ff; color: white; width: 70px; margin-left: 48px;" onclick="pause();">pause</button>
                            <!-- <button class="btn btn-sm" type="button" style="width: 60px; background-color: #e34c25; color:white; margin-right: 5px;" onclick="pause(); document.getElementById('btn-pause').innerHTML = 'pause'; set_up_system(); reset_svg(400, 400, input_size); anime = new Anime();">reset</button> -->
                        </div>
                        <br><br>
                        <div id="figure">
                            <svg id="visiable_svg"></svg>
                        </div>
                        <script src="./js/d3.js"></script>
                        <script src="./js/setup.js"></script>
                      
                    </div>
                </div>

                <div class="box-shadow p-3" style="height:780px; background-color:whitesmoke; width: 28%;">
                    <!-- <div class="box-shadow p-3" style="height:800px; background-color:#24292e; width: 400px; margin-top: 0px;"> -->
                        <br>
                        <div id="showprocess" class="Box" style="width: 85%; height: 45%; margin-left:0px; margin-top: 0px;">
                            <div class="Box-row" style="background-color:white; height: 100%; width: 100%; ">
                                <h4 class="m-0" style="color:grey; ">  
                                    Operation Process
                                </h4>
                                    <div id="process" class="one-fourth column" style="height: 90%; overflow: auto; background-color: white; width: 100%; border-radius:3px;">
                                    </div>
                            </div>
                        </div>
                        <br><br>
                        <div id="showjob" class="Box" style="overflow:auto; width: 85%; height: 45%;margin-left:0px;">
                            <div class="Box-row" style="background-color:white;  height: 100%; width: 100%;">
                                <h4 class="m-0" style="color:grey;">
                                    Jobs added to the system
                                </h4>
                                    <table>
                                        <thead>
                                            <tr class="default">
                                                <th>id</th>
                                                <th>size</th>
                                                <th>in at</th>
                                                <th>run time</th>
                                                <th>start at</th>
                                                <th>end at</th>
                                            </tr>
                                        </thead>
                                            <tbody id="jobs">
                                            </tbody>
                                    </table>
                            </div>
                        </div>
                    <!-- </div> -->
                </div>
              
        </div>
    </div>
    </body>
</html>